<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>遍历数组</h2>
        <ul>
            <li v-for="(stu,index) in studends" :key="stu.id">
                {{stu.name}}----{{index}}
            </li>
        </ul>
        <h2>遍历数字</h2>
        <p v-for="(num,index) in 6" :key="index">
            {{num}} ---- {{index}}
        </p>
        <h2>遍历字符串</h2>
        <p v-for="(s,i) in '你好啊'" :key="s">
            {{s}}---{{i}}
        </p>
        <h2>遍历对象</h2>
        <p v-for="(v,k) in studends[0]" :key="k">
            {{v}}---{{k}}
        </p>
    </div>
    <script>
        const VM = new Vue({
            el:'#root',
            data(){
                return {
                    studends:[
                        {id:1,name:'zx',hobby:'足球'},
                        {id:2,name:'zx11',hobby:'足球11'},
                        {id:3,name:'zx22',hobby:'足球22'},
                        {id:4,name:'zx33',hobby:'足球33'},
                        {id:5,name:'zx44',hobby:'足球44'},
                    ]
                }
            }
        });
    </script>
</body>
</html>